<template>
  <div class="box">
    <div class="wrap">
      <div class="SignIn" @click="$router.push('/material')">
          <!-- v-if"sessionStorage.getItem('isLogin') === 'ok'" -->
        <div class="log">
          <van-image
            round
            width="80"
            height="80"
            :src="avatar ? avatar : 'https://img01.yzcdn.cn/vant/cat.jpeg'"
          />
          <h3>欢迎：{{userName}}</h3>
        </div>
        <van-icon name="arrow" size="40"/>
      </div>
    </div>
    <!-- <div class="SignIn" @click="$router.push('/login')" else>
      <div class="log">
        <van-image
          round
          width="80"
          height="80"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <h2>登录/注册</h2>
      </div>
      <van-icon name="arrow" size="40"/>
    </div> -->
    <van-nav-bar class="bar" left-arrow @click-left="$router.push('/order')" @click-right="$router.push('/order')">
      <template #left>
        <h3>我的订单</h3>
      </template>
      <template #right>
        <h3>全部订单</h3>
        <van-icon name="arrow" size="20" color="black"/>
      </template>
    </van-nav-bar>
    <van-grid :border="false" :column-num="3" class="grid1" >
      <van-grid-item >
        <i class="iconfont icon-daifukuan"></i>
        <h4>待付款</h4>
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont icon-yunshu"></i>
        <h4>进行中</h4>
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont icon-evaluate-1-copy"></i>
        <h4>待评价</h4>
      </van-grid-item>
    </van-grid>
    <van-grid :border="false" :column-num="4" class="grid2">
      <van-grid-item>
        <p>0</p>
        <h4>积分</h4>
      </van-grid-item>
      <van-grid-item>
        <p>0</p>
        <h4>优惠券</h4>
      </van-grid-item>
      <van-grid-item>
        <p>0</p>
        <h4>收藏</h4>
      </van-grid-item>
      <van-grid-item>
        <p>0</p>
        <h4>足迹</h4>
      </van-grid-item>
    </van-grid>
    <div class="grid-wrap">
      <van-grid :border="false" :column-num="4" class="grid3">
        <van-grid-item>
          <i class="iconfont icon-dizhi"></i>
          <h4>地址管理</h4>
        </van-grid-item>
        <van-grid-item>
          <i class="iconfont icon-quanyiguanli-"></i>
          <h4>权益卡</h4>
        </van-grid-item>
        <van-grid-item>
          <i class="iconfont icon-yue1"></i>
          <h4>余额</h4>
        </van-grid-item>
        <van-grid-item>
          <i class="iconfont icon-tixing"></i>
          <h4>生日提醒</h4>
        </van-grid-item>
        <van-grid-item>
          <i class="iconfont icon-tubiao-"></i>
          <h4>客服帮助</h4>
        </van-grid-item>
        <van-grid-item>
          <i class="iconfont icon-bangzhuguanyuwomen"></i>
          <h4>关于花礼</h4>
        </van-grid-item>
        <van-grid-item @click="$router.push('/material')">
          <i class="iconfont icon-shezhi"></i>
          <h4>设置</h4>
        </van-grid-item>
      </van-grid>
    </div>
    <van-button round size="large" type="info" @click="onExit()" class="btn">退出当前账号</van-button>
  </div>
</template>

<script>
import { getUser, exit } from '@/api/request.js'
import Vue from 'vue'
import { Icon, Uploader, NavBar, Grid, GridItem, Image as VanImage, Button } from 'vant'

Vue.use(Icon)
Vue.use(Uploader)
Vue.use(NavBar)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(VanImage)
Vue.use(Button)

export default {
  // beforeRouteEnter (to, from, next) {
  //   if (sessionStorage.getItem('isLogin') === 'ok') {
  //     next()
  //   } else {
  //     next('/login')
  //   }
  // },
  data () {
    return {
      avatar: '',
      userName: ''
    }
  },
  mounted () {
    getUser({
      id: sessionStorage.getItem('userId')
    }).then(data => {
      console.log(data.data)
      this.avatar = data.data.msg.avatar
      this.userName = data.data.msg.userName
    })
  },
  methods: {
    onExit () {
      exit({
        id: sessionStorage.getItem('userId')
      }).then(data => {
        if (data.data.code === 200) {
          sessionStorage.setItem('userId', '')
          sessionStorage.setItem('isLogin', '')
          sessionStorage.setItem('token', '')
          this.$router.push('/home')
        }
      })
    }
  }
}
</script>

<style lang="scss">
.wrap{
  width: 100vw;
  .SignIn{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.4rem 0.16rem 0.3rem;
    background: url(../../../public/img/a.png);
    .log{
      display: flex;
      align-items: center;
      h2,h3{
        margin-left: 0.3rem;
        font-weight: 500;
      }
    }
  }
}
.bar{
  margin: 0.2rem 0;
  h3{
    font-weight: 500;
  }
}
.grid1{
  i{
    font-size: 0.3rem;
    color: orange;
    margin-bottom: 0.05rem;
  }
}
.grid2{
  margin-top: 0.2rem;
  h4{
    margin-top: 0.05rem;
  }
}
.grid-wrap{
  margin: 0 0.06rem;
  .grid3{
    margin-top: 0.2rem;
    i{
      font-size: 0.28rem;
      color: purple;
    }
  }
}
h4{
  font-weight: 500;
  margin-top: 0.05rem;
}
.btn{
  margin-top: 0.6rem;
  width: 90%;
  margin-left: 0.18rem;
}
</style>
